<template>
  <div>
    <div class="header">
      <van-nav-bar
        title="修改密码"
        left-text="返回购物车"
        left-arrow
        @click-left="$router.push('/my')"
      >
        <template #left>
          <van-icon name="arrow-left" size="25" color="black" />
        </template>
        <template #right> </template>
      </van-nav-bar>
      <van-cell-group>
        <van-field
          v-model="oldPass"
          label="旧密码"
          placeholder="请输入旧密码"
          autofocus
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="newPass"
          label="新密码"
          placeholder="请输入新密码"
        />
      </van-cell-group>
      <!-- 按钮 -->
      <div class="bottom">
        <van-button
          round
          type="info"
          size="large"
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          @click="setPass"
          >修改密码</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { setPassword } from "../../api/user";
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
export default {
  data() {
    return {
      oldPass: "",
      newPass: "",
    };
  },
  methods: {
    setPass() {
      setPassword({
        userid: localStorage.getItem("userid"),
        oldpassword: this.oldPass,
        newpassword: this.newPass,
      }).then((res) => {
        console.log(res.data);
        switch (res.data.code) {
          case "10030":
            Toast("原始密码错误");
            break;
          case "200":
            Toast("修改成功");
            this.$router.push("/my")
            break;
          default:
            break;
        }
      });
    },
  },
};
</script>

<style scoped>
.bottom {
  width: 90%;
  margin: auto;
}
</style>